<script lang="ts" setup>
import { getSafeInfo } from '@/utils/system'

defineOptions({ name: 'JediPagePop' })
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: { type: String, default: '' },
})
const emit = defineEmits(['update:modelValue'])

const safeInfo = getSafeInfo()
const pageStyle = computed(() => {
  return {
    paddingTop: `${safeInfo.top}px`,
    paddingBottom: `${safeInfo.bottom}px`,
    boxSizing: 'border-box',
  }
})

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<template>
  <wd-popup
    :model-value="modelValue"
    position="right"
    custom-style="width: 100vw"
    v-bind="$attrs"
    @close="handleClose"
  >
    <view :style="pageStyle" class="h-screen flex flex-col">
      <wd-navbar :title="title" left-text="" left-arrow @click-left="handleClose" />
      <view class="h-10 flex-1">
        <slot />
      </view>
      <view v-if="$slots.footer" class="p-2">
        <slot name="footer" />
      </view>
    </view>
  </wd-popup>
</template>
